<template>
    <!-- 教职工查看详情处理组件handling -->
    <div>
        <div class="s-handling" v-for="item in Farr.concat(NArr)" :key="item.id">
            <Row>
                <Col span=3><Icon class="tou" type="android-contact"></Icon></Col>
                <Col span=9 class="s-midel">{{item.NAME}}</Col>
                <Col span=4 class="s-right" offset="6">{{item.EVENTFLOW_STATUS_NAME}}</Col>
            </Row>
            <Row>
                <Col span=19 offset="3">
                    <div class="s-time">
                        {{item.CREATETIME}}
                    </div>
                </Col> 
            </Row>
            <Row v-if="item.EVENTFLOW_CONTENT">
                <Icon type="arrow-up-b" class="Micon"></Icon>
                <Col span=19 offset="3" class="s-textear">
                    {{item.EVENTFLOW_CONTENT}}
                </Col> 
            </Row>
            <Row>
            <Col span=22 v-if="item.NAME =='我' && item.EVENTFLOW_STATUS == 0">
                <div style="height:50px">
                    <div class="cha-button"  @click="tijiao">回复</div>
                </div>
            </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
    props: ['handing'],
    computed: {
        NArr: function() {
            return this.handing.filter(item => item.NAME === '我')
        },
        Farr: function() {
            return this.handing.filter(item => item.NAME !== '我')
        }
    },
    methods: {
        tijiao() {
            this.$emit('tij')
        }
    }
}
</script>

<style lang="less">
.s-handling{
    border-top:1px solid #E4E4E4;
    padding:10px 0;
    .s-midel{
    padding-top:8px;
    color:#0093DD;
    }
    .s-right{
        padding-top:8px;
        text-align: end
    }
    .s-time{
        color:#A7A7A7;
    }
    .s-textear{
        margin-top:7px;
        background-color:#F5F5F5;
        padding:15px 20px;
        color:#A7A7A7;
        word-wrap: break-word;
    }
    .Micon{
        position: relative;
        right: 74%;
        top: -6px;
        color:#F5F5F5;
        font-size: 18px;
    }
    .cha-button{
        width: 100%;
    }
    .tou{
        background-color: #0093dd;
        border-radius: 100%;
        color: #fff;
        font-size: 15px;
        padding: 3px 5px;
        margin-top:5px;
    }
}
.s-handling:nth-of-type(1){
    border-top:1px solid white;
}
</style>
